import React, { Component } from 'react';

class LifeChild extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '子组件的数据'
        }
        console.log(0, 'constructor创建组件,初始化state');
    }
    static getDerivedStateFromProps(props, state) {
        console.log(1, '挂载及更新映射到state中');
        console.log(props);
        console.log(state);
        return props
    }
    componentDidMount() {
        console.log(3, '挂载完成');
    }
    changeMsg = () => {
        this.setState({
            msg: '小杨'
        })
    }
    // 判断组件是否更新
    shouldComponentUpdate(nextProps, nextState) {
        console.log(2, '判断组件是否更新');
        console.log(nextProps);
        console.log(this.state);
        console.log(nextState);
        return true;
        // 不更新
        // return false;
    }
    // 使用getSnapshotBeforeUpdate必须配合componentDidUpdate使用
    getSnapshotBeforeUpdate() {
        console.log(4, 'DOM快照-虚拟DOM');
        return document.querySelector('.box').innerHTML
    }

    componentDidUpdate(props, state, dom) {
        console.log(5, '更新完成');
        console.log(dom);
    }
    componentWillUnmount() {
        console.log('组件卸载');
    }
    render() {
        // console.log(2, '渲染DOM过程');
        console.log(3, '更新渲染DOM过程');
        return (
            <div className='box'>
                <h2>生命周期子组件</h2>
                <p>{this.state.msg}</p>
                <p>{this.state.fmsg}</p>
                <p>{this.props.fmsg}</p>
                <button onClick={this.changeMsg}>更新-更新生命周期阶段</button>
            </div>

        );
    }
}

export default LifeChild;